<template>
  <section class="app-container">
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters" @submit.native.prevent>
        <el-form-item>
          <el-input v-model="filters.name" placeholder="赛事名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="getProject">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd">新增</el-button>
        </el-form-item>
        <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
        <el-button :disabled="this.sels.length===0" style="right: 10px;">导出</el-button>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table :data="projectData" highlight-current-row @selection-change="selsChange" border style="width: 100%;">
      <el-table-column type="selection" width="50px">
      </el-table-column>
      <el-table-column prop="project.projectId" sortable label="项目编号" min-width="100">
      </el-table-column>
      <el-table-column prop="project.name" label="赛事名称" min-width="120">
      </el-table-column>
      <el-table-column prop="project.format" label="赛制" min-width="90" :formatter="formatFormat">
      </el-table-column>
      <el-table-column prop="project.major" label="专业" min-width="120">
      </el-table-column>
      <el-table-column
          label="日期"
          min-width="180"
          sortable>
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.project.projectDate }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="project.sponsor" label="主办单位" min-width="100">
      </el-table-column>
      <el-table-column
          prop="status"
          label="审核状态"
          :filter-method="filterStatus"
          min-width="100"
          :filters="[{ text: '通过', value: '3' }, { text: '不通过', value: '2' },{text: '待审核', value : '1'},{text : '待提交', value : '0'}]"
          filter-placement="bottom-end">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == '0'"
                  :type="scope.row.status === '3' ? 'primary' : 'success'"
                  disable-transitions>待提交
          </el-tag>
          <el-tag v-if="scope.row.status == '1'"
                  :type="scope.row.status === '3' ? 'primary' : 'success'"
                  disable-transitions>待审核
          </el-tag>
          <el-tag v-if="scope.row.status == '3'"
                  :type="scope.row.status === '3' ? 'primary' : 'success'"
                  disable-transitions>已通过
          </el-tag>
          <el-tag v-if="scope.row.status == '2'"
                  :type="scope.row.status === '3' ? 'primary' : 'success'"
                  disable-transitions>不通过
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" min-width="185" align="center">
        <template slot-scope="scope">
          <el-button size="small" type="text" v-show="scope.row.status === '0'"
                     @click="handleCommit(scope.$index, scope.row)">提交
          </el-button>
          <el-button size="small" type="text" v-show="scope.row.status === '0'"
                     @click="handleEdit(scope.$index, scope.row)">编辑
          </el-button>
          <el-button size="small" type="text" @click="handleDetail(scope.$index, scope.row)">详情</el-button>
          <el-button type="text" v-show="scope.row.status === '2' || scope.row.status === '0' " size="small"
                     @click="singleDel(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        background
        @size-change="handleSizeChange"
        :current-page="page"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>

    <!--编辑界面-->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
      <el-form :model="editForm" label-width="120px" :rules="editFormRules" ref="editForm">
        <el-row>
          <input type="hidden" v-model="editForm.id">
          <el-col :span="14">
            <el-form-item label="赛事名称" prop="project.name">
              <el-input v-model="editForm.project.name" :disabled="dialogStatus == 'detail'" auto-complete="off"
                        style="width: 220px;"></el-input>
            </el-form-item>
            <el-form-item label="组赛单位" prop="project.organization">
              <el-input v-model="editForm.project.organization" :disabled="dialogStatus == 'detail'" auto-complete="off"
                        style="width: 220px;"></el-input>
            </el-form-item>
            <el-form-item label="专业" prop="project.major">
              <el-input v-model="editForm.project.major" :disabled="dialogStatus == 'detail'" auto-complete="off"
                        style="width: 220px;"></el-input>
            </el-form-item>
            <el-form-item label="竞赛起始日期" prop="project.startDate">
              <el-date-picker
                  v-model="editForm.project.startDate"
                  type="datetime"
                  :disabled="dialogStatus == 'detail'"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="竞赛结束日期" prop="project.endDate">
              <el-date-picker
                  v-model="editForm.project.endDate"
                  type="datetime"
                  :disabled="dialogStatus == 'detail'"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期时间">
              </el-date-picker>

            </el-form-item>
            <el-form-item label="赛制" prop="project.format">
              <el-radio-group v-model="editForm.project.format">
                <el-radio :disabled="dialogStatus == 'detail'" class="radio" label="1" style="width: 50px;">单人赛
                </el-radio>
                <el-radio :disabled="dialogStatus == 'detail'" class="radio" label="2" style="width: 50px;">团体赛
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="申请立项日期" prop="project.projectDate">
              <el-date-picker
                  v-model="editForm.project.projectDate"
                  :disabled="dialogStatus == 'detail'"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetime"
                  placeholder="选择日期时间">
              </el-date-picker>
              <!--          <el-input v-show="dialogStatus == 'detail'" v-model="editForm.projectDate" :disabled="dialogStatus == 'detail'" auto-complete="off" style="width: 220px;"></el-input>-->
            </el-form-item>
            <el-form-item label="主办单位" prop="project.sponsor">
              <el-input v-model="editForm.project.sponsor" :disabled="dialogStatus == 'detail'" auto-complete="off"
                        style="width: 220px;"></el-input>
            </el-form-item>
            <el-form-item label="竞赛承办单位" prop="project.contractor">
              <el-input v-model="editForm.project.contractor" :disabled="dialogStatus == 'detail'" auto-complete="off"
                        style="width: 220px;"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="project.phone">
              <el-input v-model="editForm.project.phone" :disabled="dialogStatus == 'detail'" auto-complete="off"
                        style="width: 180px;"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="注册费" prop="budget.enroll">
              <el-input-number v-model="editForm.budget.enroll" :min="0"
                               :disabled="dialogStatus == 'detail'"></el-input-number>
            </el-form-item>
            <el-form-item label="差旅费" prop="budget.travel">
              <el-input-number v-model="editForm.budget.travel" :min="0"
                               :disabled="dialogStatus == 'detail'"></el-input-number>
            </el-form-item>
            <el-form-item label="培训费" prop="budget.train">
              <el-input-number v-model="editForm.budget.train" :min="0"
                               :disabled="dialogStatus == 'detail'"></el-input-number>
            </el-form-item>
            <el-form-item label="指导费" prop="budget.guide">
              <el-input-number v-model="editForm.budget.guide" :min="0"
                               :disabled="dialogStatus == 'detail'"></el-input-number>
            </el-form-item>
            <el-form-item label="耗材费" prop="budget.consume">
              <el-input-number v-model="editForm.budget.consume" :min="0"
                               :disabled="dialogStatus == 'detail'"></el-input-number>
            </el-form-item>
            <el-form-item label="奖金" prop="budget.bonus">
              <el-input-number v-model.number="editForm.budget.bonus" :min="0"
                               :disabled="dialogStatus == 'detail'"></el-input-number>
            </el-form-item>
            <el-form-item label="其他" prop="budget.other">
              <el-input-number v-model.number="editForm.budget.other" :min="0"
                               :disabled="dialogStatus == 'detail'"></el-input-number>
            </el-form-item>
            <el-form-item label="合计">
              <el-input-number v-model="editForm.budget.sum" disabled :min="0"></el-input-number>
            </el-form-item>

            <el-form-item label="邮件" prop="project.mail">
              <el-input v-model="editForm.project.mail" :disabled="dialogStatus == 'detail'" auto-complete="off"
                        style="width: 180px;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="论证组赛的目的和意义" prop="project.objective">
          <el-input type="textarea" v-model="editForm.project.objective" :disabled="dialogStatus == 'detail'"
                    auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="审核意见"
                      v-show="dialogStatus == 'detail' && (editForm.status == '3' || editForm.status == '2')">
          <el-input type="textarea" v-model="editForm.opinion" disabled auto-complete="off"></el-input>
        </el-form-item>

        <!--        详情信息-->
        <el-form-item v-show="dialogStatus == 'detail'" label="竞赛邀请函或通知附件" prop="project.invitation">
          <el-input v-show="dialogStatus == 'detail'" v-model="fileName" :disabled="dialogStatus == 'detail'"
                    auto-complete="off"></el-input>
          <a :href="'http://cqfimages.gxuwzapp.top/'+ editForm.project.invitation" target="_blank"
             v-show="dialogStatus != 'add' && editForm.project.invitation != undefined">预览附件</a>
          <!--          <a :href="'http://miraclepeak.xyz:8888/subject/file/'+ editForm.project.invitation" target="_blank" v-show="dialogStatus != 'add' && editForm.project.invitation != undefined">预览附件</a>-->
        </el-form-item>

        <!--        添加or修改-->
        <el-tooltip class="item" effect="dark" content="将签字盖章后的项目立项申请书扫描为 PDF 文档" placement="top">
          <div v-if="dialogStatus!='detail'" class="file" style="margin-left: 40px;float: left;">
            <input v-if="dialogStatus!='detail'" id="fileUrl" type="file" @change="getFileBase()">上传附件
          </div>
        </el-tooltip>

        <div style="margin-left: 50px;clear: both">
          <a v-show="dialogStatus == 'update'" :href="'http://cqfimages.gxuwzapp.top/'+ editForm.project.invitation"
             target="_blank">{{ fileName }}</a>
          <!--          <el-link v-show="dialogStatus == 'update'"  :href="'http://miraclepeak.xyz:8888/subject/file/'+ editForm.project.invitation" target="_blank">{{fileName}}</el-link>-->
          <el-link :underline="false" v-show="dialogStatus == 'add'" :href="fileUrl" target="_blank">{{ fileName }}
          </el-link>
        </div>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="dialogFormVisible=false" v-show="dialogStatus != 'detail'">取消</el-button>
        <el-button @click.native="dialogFormVisible=false" v-show="dialogStatus == 'detail'">关闭</el-button>
        <el-button v-if="dialogStatus == 'add'" type="primary" @click="projectAdd">添加</el-button>
        <el-button v-show="dialogStatus == 'update'" type="primary" @click="projectUpdate">修改</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>
let Base64 = require('js-base64').Base64
import {getToken} from '../../api/util'

export default {
  data() {
    return {
      fileBase64: [],   // 存储文件 base64的值将值传给后端处理
      fileBase64Len: 0, // 未存储完成文件 base64的长度
      uploadFlag: false, // 上传文件标识
      fileName: '',      // 上传的文件名称
      fileUrl: "",       // 上传后的文件路径
      fileList: [],
      dialogStatus: '',
      textMap: {
        update: '项目立项修改',
        add: '项目立项申请',
        detail: "项目立项详情",
      },
      dialogFormVisible: false,
      filters: {
        name: ''
      },
      total: 0,
      page: 1,  // 当前页
      limit: 10,  // 每页数量
      projectData: [],  // 项目立项数据
      teacherList: [],  // 教师列表
      sels: [], // 列表选中列
      // 编辑界面数据
      editForm: {
        id: 0,
        projectId: 0,
        budgetId: 0,
        status: "",
        opinion: "",
        // 项目基本信息
        project: {
          name: "",
          teacherId: "",
          major: "",
          format: "",
          projectDate: "",
          sponsor: "",
          contractor: "",
          objective: "",
          invitation: [],
          phone: "",
          mail: "",
          organization: "",
          startDate: "",
          endDate: "",
        },
        // 经费预算
        budget: {
          enroll: "",
          travel: "",
          train: "",
          guide: "",
          bonus: "",
          other: "",
          consume: "",
          sum: "",

        },

      },
      editFormRules: {
        project: {
          name: [{required: true, message: '请输入赛事名称', trigger: 'blur'}],
          major: [{required: true, message: '请输入专业', trigger: 'blur'}],
          format: [{required: true, message: '请选择赛制', trigger: 'blur'}],
          mail: [{required: true, message: '请输入邮件', trigger: 'blur'}],
          phone: [{required: true, message: '请输入联系电话', trigger: 'blur'}],
          // projectDate: [{ required: true, message: '请输入申请立项日期', trigger: 'blur' }],
          organization: [{required: true, message: '请输入组赛单位', trigger: 'blur'}],
          startDate: [{required: true, message: '请输入竞赛起始日期', trigger: 'blur'}],
          endDate: [{required: true, message: '请输入竞赛结束日期', trigger: 'blur'}],
          contractor: [{required: true, message: '请输入竞赛承办单位', trigger: 'blur'}],
          sponsor: [{required: true, message: '请输入主办单位', trigger: 'blur'}],
          objective: [{required: true, message: '请输入论证组赛的目的和意义', trigger: 'blur'}],
          projectDate: [{required: true, message: '请输入申请立项日期', trigger: 'blur'}],
          invitation: [{required: true, message: '请上传竞赛邀请函或通知附件', trigger: 'blur'}],
        },
        budget: {
          enroll: [{required: true, message: '请输入注册费', trigger: 'blur'}],
          travel: [{required: true, message: '请输入差旅费', trigger: 'blur'}],
          train: [{required: true, message: '请输入培训费', trigger: 'blur'}],
          guide: [{required: true, message: '请输入指导费', trigger: 'blur'}],
          consume: [{required: true, message: '请输入耗材费', trigger: 'blur'}],
          bonus: [{required: true, message: '请输入奖金', trigger: 'blur'}],
          other: [{required: true, message: '请输入其他费用', trigger: 'blur'}],
        }
      },


    }
  },
  mounted() {
    this.getTeacherList()
    this.getProject()
  },
  watch: {
    // 监听上传文件标识
    uploadFlag: function () {
      if (this.uploadFlag == true) {
        // 开启上传文件
        // this.fileUpload();
        this.uploadImg(this.fileBase64[0])
        // 关闭上传文件
        this.uploadFlag = false;
      }
    },
    // 监听是否上传文件
    fileBase64: function () {
      if (this.fileBase64.length > this.fileBase64Len) {
        // 开启上传文件
        this.uploadFlag = true;
      }
    },
    enroll(value) {
      this.editForm.budget.sum = this.editForm.budget.sum + value;
    },
    train(value) {
      this.editForm.budget.sum = this.editForm.budget.sum + value;
    },
    travel(value) {
      this.editForm.budget.sum = this.editForm.budget.sum + value;
    },
    guide(value) {
      this.editForm.budget.sum = this.editForm.budget.sum + value;
    },

  },
  computed: {
    enroll() {
      this.editForm.budget.sum = this.editForm.budget.enroll + this.editForm.budget.train + this.editForm.budget.travel
          + this.editForm.budget.guide + this.editForm.budget.consume + this.editForm.budget.bonus + this.editForm.budget.other;
    },

  },
  methods: {
    // 将当前上传文件转换为base64
    getFileBase() {
      this.fileBase64 = []
      var _this = this;
      _this.fileBase64Len = _this.fileBase64.length;
      var event = event || window.event;
      var file = event.target.files[0];
      _this.fileName = file.name;

      let reader = new FileReader();
      // 转base64
      reader.onload = function (e) {
        _this.fileBase64.push(e.target.result);
      }
      reader.readAsDataURL(file);
    },

    // 上传文件到七牛云
    async uploadImg(imgStr) {
      // 去掉前缀
      imgStr = imgStr.substring(imgStr.indexOf(',') + 1)
      const that = this
      // 生成唯一文件名称
      let name = that.uuid() + "_" + that.fileName

      // 上传到七牛云要求key用base64编码
      let key = Base64.encode(name)
      let token = ""

      // 从后台获取token
      await getToken().then(res => {
        if (res.data.code === 666) {
          token = res.data.data.token
        } else {
          that.$message.error("上传文件失败,请重试")
          that.fileName = ""
          return;
        }
      })

      let url = "http://upload-z2.qiniup.com/putb64/-1/key/" + key,
          urlHeader = "http://cqfimages.gxuwzapp.top/"

      let xhr = new XMLHttpRequest()
      xhr.open("POST", url, true);
      //文本类型
      xhr.setRequestHeader("Content-Type", "application/octet-stream");

      //七牛认证信息 注意空格
      xhr.setRequestHeader("Authorization", "UpToken " + token);
      xhr.send(imgStr);
      //监听状态
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
          var result = xhr.responseText;
          console.log(typeof result + '上传请求结果数据:' + result);
          result = JSON.parse(result);

          if (result.error != undefined) {
            that.$message.error("上传文件失败")
            that.fileName = ""
            return;
          }
          that.fileUrl = urlHeader + result.key
          that.editForm.project.invitation = name

          that.$message.success(that.fileName + "文件上传成功")
        }

      }
    },

    // 上传文件
    fileUpload: function () {
      let _this = this;
      _this.http({
        url: "upload/upload",
        method: "post",
        data: {
          "name": this.fileName,
          "baseString": this.fileBase64[_this.fileBase64.length - 1],
        },
      }).then(function (res) {
        // 关闭上传文件
        _this.uploadFlag = false;
        if (res.data.code === 666) {
          _this.fileName = res.data.data.name;
          _this.editForm.project.invitation = res.data.data.fileName;
          _this.fileUrl = "http://127.0.0.1:8888/subject/file/" + res.data.data.fileName;
          console.log("url=" + _this.fileUrl);

          _this.$message.success(res.data.data.name + "文件上传成功")
        } else {
          console.log("error-->" + JSON.stringify(res.data))
          _this.$message.error(res.data.message)
        }

      }).catch(function (error) {
        // 关闭上传文件
        _this.uploadFlag = false;
        _this.$message.error("error-->", error)
      });
    },

    // 生成唯一标识
    uuid() {
      var s = [];
      var hexDigits = '0123456789abcdef';
      for (var i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
      }
      s[14] = '4';
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
      s[8] = s[13] = s[18] = s[23] = '-';

      this.uuidA = s.join('');
      console.log(s.join(''), 's.join("")');
      return this.uuidA;
    },


    // 查询项目信息
    getProject: function () {
      var _this = this;
      let teacher = localStorage.getItem("teacherId");
      if (teacher === 'undefined' || teacher === 'null' || teacher === undefined || teacher === null) {
        teacher = "";
      }
      let params = {
        status: "",
        name: this.filters.name,
        page: this.page,
        limit: this.limit,
        teacherId: teacher,
      }
      _this.http.get("projectApply/list", {params: params}).then(res => {
        _this.projectData = res.data.data.list;
        _this.total = res.data.data.total;
      }).catch(error => {
        console.log("error->", error)
      })

    },
    // 查询全部教师
    getTeacherList() {
      const _this = this;
      _this.http.get("teacher/list"
      ).then(res => {
        _this.teacherList = res.data;
      }).catch(error => {
        console.log("teacher error", error)
      });

    },

    // 显示新增界面
    handleAdd: function () {
      this.dialogStatus = 'add'
      this.dialogFormVisible = true;
      this.fileName = ""; // 置空
      this.editForm = {
        project: {
          format: '1'
        },
        budget: {},
      }
      // this.editForm.format = '1'
    },
    // 显示编辑界面
    handleEdit(index, row) {
      this.dialogStatus = 'update'
      this.dialogFormVisible = true;
      // 获取当前选中的附件信息
      if (row.project.invitation != undefined) {
        this.fileName = row.project.invitation.substring(row.project.invitation.lastIndexOf("_") + 1);
      } else {
        this.fileName = "";
      }
      let charge = localStorage.getItem("teacherId");
      if (charge === 'undefined' || charge === 'null' || charge === undefined || charge === null) {
        charge = "";
      }
      this.$set(row.project, "teacherId", charge)
      this.editForm = Object.assign({}, row)
    },
    // 提交项目立项申请
    handleCommit(index, row) {
      this.$confirm('确认提交该项目立项吗?', '提示', {
        type: 'warning'
      })
          .then(() => {
            if (row.status === "0") {
              let _this = this;
              _this.http({
                url: "projectApply/commit",
                data: {
                  id: row.id,
                  projectId: row.projectId,
                  budgetId: row.budgetId,
                  status: "1",
                },
                method: "post",
              }).then(res => {
                if (res.data.code === 666) {
                  _this.getProject();
                  _this.$message({
                    message: "提交成功",
                    type: 'success'
                  });
                } else {
                  _this.$message({
                    message: res.data.message,
                    type: 'error'
                  });
                }
              }).catch(error => {
                console.log("projectApply error-->", error)
              });
            } else if (row.status === "1") {
              this.$message({
                message: "已经提交，不必重复提交",
                type: 'error'
              });
            }
          }).catch(() => {

      })
    },
    // 显示详情框
    handleDetail(index, row) {
      this.dialogStatus = 'detail';
      // 获取当前选中的附件信息
      if (row.project.invitation != undefined) {
        this.fileName = row.project.invitation.substring(row.project.invitation.lastIndexOf("_") + 1);
      } else {
        this.fileName = "";
      }
      this.dialogFormVisible = true;
      this.editForm = Object.assign({}, row);
    },

    // 新增项目信息
    projectAdd: function () {
      if (this.fileName == null || this.fileName === "" || this.fileName === undefined) {
        this.$message.warning("请上传项目立项附件")
        return;
      }
      this.$refs.editForm.validate(valid => {
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {})
              .then(() => {
                const para = Object.assign({}, this.editForm)
                var _this = this;

                let charge = localStorage.getItem("teacherId");
                if (charge === 'undefined' || charge === 'null' || charge === undefined || charge === null) {
                  charge = "";
                }
                para.project.teacherId = charge;

                // 项目信息的保存or更新
                _this.http({
                  url: "projectApply/save",
                  method: "post",
                  data: {
                    id: para.id,
                    projectId: para.projectId || undefined,
                    budgetId: para.budgetId,
                    status: para.status === undefined ? "0" : para.status,
                    project: para.project,
                    budget: para.budget,
                  },
                }).then(function (res) {
                  _this.dialogFormVisible = false
                  if (res.data.code === 666) {
                    _this.dialogFormVisible = false;
                    _this.$message({
                      message: "操作成功",
                      type: 'success'
                    });
                    _this.getProject();
                  } else {
                    _this.$message({
                      message: "操作失败",
                      type: 'error'
                    });
                  }
                }).catch(error => {
                  _this.dialogFormVisible = false
                  console.log("error--->", error)
                });

              }).catch(e => {
            // 打印一下错误
            console.log("保存or更新出错:" + e)
          })
        }
      })
    },

    // 项目信息修改
    projectUpdate: function () {
      let _this = this;
      this.$refs.editForm.validate(valid => {
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {})
              .then(() => {
                let teacherId = localStorage.getItem("teacherId");
                if (teacherId === 'undefined' || teacherId === 'null' || teacherId === undefined || teacherId === null) {
                  teacherId = "";
                }
                this.$set(this.editForm.project, 'teacherId', teacherId);

                var para = Object.assign({}, _this.editForm, {project: {teacherId: teacherId}})

                this.$set(para, 'project.teacherId', teacherId);

                // 项目信息的保存or更新
                _this.http({
                  url: "projectApply/update",
                  method: "post",
                  data: {
                    id: para.id,
                    projectId: para.projectId,
                    budgetId: para.budgetId,
                    status: para.status === undefined ? "0" : para.status,
                    project: _this.editForm.project,
                    budget: _this.editForm.budget,
                  },
                }).then(function (res) {
                  _this.dialogFormVisible = false
                  if (res.data.success === true) {
                    _this.dialogFormVisible = false;
                    _this.$message({
                      message: "修改成功",
                      type: 'success'
                    });
                    _this.getProject();
                  } else {
                    _this.$message({
                      message: "修改失败",
                      type: 'error'
                    });
                  }
                }).catch(error => {
                  _this.dialogFormVisible = false
                  _this.$message.error(error)
                });

              }).catch(e => {
            // 打印一下错误
            console.log("保存or更新出错:" + e)
          })
        }
      })

    },
    // 删除
    singleDel(index, row) {
      let _this = this;
      this.$confirm('确认删除该记录吗?', '提示', {
        type: 'warning'
      })
          .then(() => {
            if (row.status != '3') {
              if (row.id != undefined) {
                _this.http.get("projectApply/delete/" + row.id
                ).then(function (res) {
                  if (res.data.code === 666) {
                    _this.getProject()
                    _this.$message.success("删除成功")
                  } else {
                    _this.$message.error(res.data.message)
                  }
                });
              }
            } else {
              _this.$message({
                message: '删除失败,不能删除已经通过审核的项目立项',
                type: 'error'
              });
            }

          }).catch(() => {

      })
    },

    // 批量删除
    batchRemove: function () {
      let flag = true;
      var _this = this;
      this.$confirm('确认删除选中记录吗？', '提示', {
        type: 'warning'
      }).then(() => {
        // 查看选中的是否含有已经通过审核的项目立项
        this.sels.map(item => {
          if (item.status === "3") {
            flag = false;
          }

        });
        if (flag) {
          let ids = []
          _this.sels.forEach((obj) => {
            ids.push(obj.id);
          })
          if (this.sels.map(item => item.id).toString() != undefined) {
            _this.http.post("projectApply/batchRemove", ids)
                .then(function (res) {
                  if (res.data.code === 666) {
                    _this.getProject()
                    _this.$message.success("删除成功")
                  } else {
                    _this.$message.error(res.data.message)
                  }
                }).catch(error => {
              console.log("error--->", error)
              _this.$message.error("删除失败")
            });
          }

        } else {
          this.$message({
            message: '删除失败,不能删除已经通过审核的项目立项',
            type: 'error'
          })
        }
      }).catch(() => {
        console.log("cancel");
      });

    },
    handleCurrentChange(val) {
      // 获取当前页
      this.page = val;
      // 重新获取数据
      this.getProject();
    },
    handleSizeChange(val) {
      this.limit = val;
      this.getProject();
    },

    // 全选单选多选
    selsChange(sels) {
      this.sels = sels
    },

    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },

    formatFormat: function (row, column) {
      return row.project.format === "1" ? "单人赛" : "团体赛";
    },
    // 项目负责人编号转换名字显示
    formatCharge: function (row, column) {
      this.teacherList.forEach((obj) => {
        if (obj.teacherId === row.project.teacherId) {
          row.project.teacherId = obj.teacherName;
        }
      });
      return row.project.teacherId;
    },
    filterStatus(value, row) {
      return row.status === value;
    },
    formatStatus: function (row) {
      if (row.status === "0") {
        return "待提交";
      } else if (row.status === "1") {
        return "待审核";
      } else if (row.status === "2") {
        return "不通过";
      } else if (row.status === "3") {
        return "已批准";
      }
    },


  }

}
</script>

<style rel="stylesheet/css">
@keyframes treeTableShow {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes treeTableShow {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
</style>

<style lang="scss" rel="stylesheet/scss" scoped>
a:link {
  color: blue;
}

/* 未访问的链接 */
a:visited {
  color: orange;
}

/* 已访问的链接 */
a:hover {
  color: green;
}

/* 鼠标划过链接 */
a:active {
  color: red;
}

/* 已选中的链接 */


$color-blue: #2196F3;
$space-width: 18px;
.ms-tree-space {
  position: relative;
  top: 1px;
  display: inline-block;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  width: $space-width;
  height: 14px;

  &::before {
    content: ""
  }
}

.processContainer {
  width: 100%;
  height: 100%;
}

table td {
  line-height: 26px;
}

.tree-ctrl {
  position: relative;
  cursor: pointer;
  color: $color-blue;
  margin-left: -$space-width;
}


.file {
  position: relative;
  display: inline-block;
  background: #D0EEFF;
  border: 1px solid #99D3F5;
  border-radius: 4px;
  padding: 4px 12px;
  overflow: hidden;
  color: #1E88C7;
  text-decoration: none;
  text-indent: 0;
  line-height: 20px;
}

.file input {
  position: absolute;
  font-size: 100px;
  right: 0;
  top: 0;
  opacity: 0;
  cursor: pointer
}

.file:hover {
  background: #AADFFD;
  border-color: #78C3F3;
  color: #004974;
  text-decoration: none;
}
</style>
